<template>
  <div class="proportionOfTourists">
    <!-- 游客比例图表 -->
     <div class="top">
         <p class="title">实时游客统计</p>
         <p class="imageUsedAsTitle"></p>
         <p class="right">可预约总量<span>99999</span>人</p>
     </div>
     <div class="totalNumber">
        <span v-for="(item,index) in totalNumberOfPeople" :key="index">{{ item }}</span>
     </div>
     <!-- 下面的这个div元素是被用于用echarts展示图表的区域↓ -->
     <div class="charts" ref="refForCharts">charts</div>
  </div>
</template>

<script lang="ts" setup name="Tourist">
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill' // 引入echarts的水球图插件
console.log(echarts) // Module
let totalNumberOfPeople = ref('216908人')
let refForCharts = ref() // 获取被用于用echarts展示图表的区域的所在DOM节点的引用
onMounted(() => {
    let instanceOfEcharts = echarts.init(refForCharts.value) // 初始化echarts实例
    // 设置实例的配置项
    instanceOfEcharts.setOption({
        // 标题组件↓
        title: {
            text: '水球图',
        },
        // X轴组件↓
        xAxis: {
            
        },
        // y轴组件↓
        yAxis:{},
        // 系列（该选项被用于指定将展示哪一种图表）↓
        series:[{
            // type:'bar', // 指定展示的是柱状图
            // data: [10, 20, 30, 40], // 展示的数据            
            type:'liquidFill', // 指定展示的是水球图
            data:[0.6,0.5,0.4,0.3], // 每一个数据代表水球图中的一个波浪，波浪的数量取决于数组的长度
            waveAnimation: true, // 是否让波浪在抬升后具备动画效果（即是否让波浪翻滚）
            radius: '80%', // 水球图的半径
            // 水球图的圆周轮廓配置↓
            outline:{
                show:true,
                borderDistance: 0,
                itemStyle:{
                    color:'red',
                    borderColor:'#294D99',
                    borderWidth: 8,
                    shadowBlur:20,
                    shadowColor:'rgba(0,0,0,0.25)'
                }
            }
        }],
        // 布局组件↓
        grid:{
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        }
    })
})
</script>

<style lang="scss" scoped>
.proportionOfTourists{
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    .top{
        margin-left: 20px;
        .title{
            color: white;
            font-size: 16px;
        }
        .imageUsedAsTitle{
            background: url(../../images/dataScreen-title.png) no-repeat;
            width: 68px;
            height: 7px;
            background-size: 100% 100%;
            margin-top: 10px;
        }
        .right{
            float: right;
            color: white;
            font-size: 20px;
            span{
                color: yellowgreen;
            } 
        }
    }
    .totalNumber{
        margin-top: 30px;
        // background: red;
        display: flex;
        padding: 10px;
        span{
            color: white;
            font-size: 20px;
            // display: block;
            text-align: center;
            flex: 1;
            height: 40px;
            line-height: 40px;
            background: url(../../images/total.png) no-repeat;
            background-size: 100% 100%;
            color: #29fcff;
        }
    }
    .charts{
        width: 100%;
        height: 250px;
        // background: red;
    }
}
</style>